<template>
  <transition
    name="page"
    mode="out-in"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <slot></slot>
  </transition>
</template>

<script>
import gsap from 'gsap'

export default {
  name: 'PageTransition',
  
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateY(20px)'
    },
    enter(el, done) {
      this.$gsap.to(el, {
        duration: 0.6,
        opacity: 1,
        y: 0,
        ease: 'power2.out',
        onComplete: done
      })
    },
    beforeLeave(el) {
      el.style.opacity = 1
    },
    leave(el, done) {
      this.$gsap.to(el, {
        duration: 0.6,
        opacity: 0,
        y: -20,
        ease: 'power2.in',
        onComplete: done
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-enter-active,
.page-leave-active {
  transition: opacity 0.6s, transform 0.6s;
}

.page-enter,
.page-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style> 